
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <script type="text/javascript">

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {});
        // 开启帧率
        viewer.scene.debugShowFramesPerSecond = true;

        let start = new Cesium.JulianDate.fromDate(new Date());

        // 开始时间  cesium用的JulianDate:代表天文朱利安时间,用的是世界协调时,比北京时间晚8个小时, 加上东8时，就是当前的真正时间
        start = Cesium.JulianDate.addHours(start, 1, new Cesium.JulianDate());
        const stop = Cesium.JulianDate.addSeconds(start, 100, new Cesium.JulianDate());

        // 设置时钟范围
        viewer.clock.startTime = start.clone();
        viewer.clock.stopTime = stop.clone();
        viewer.clock.currentTime = start.clone();

        // 循环结束时后续动作
        viewer.clock.clockRange = 2;

        // 时间速率控制速度，时间调快多少倍，比如原来用时360秒，调整10倍后，现在用时36秒
        viewer.clock.multiplier = 5;
        //给下方时间线设置边界
        viewer.timeline.zoomTo(start, stop);
        viewer.scene.globe.depthTestAgainstTerrain = true;

        const position = new Cesium.SampledPositionProperty();

        // 跑道
        const startPos = Cesium.Cartesian3.fromDegrees(126.382821, 35.005608, 50);

        // 跑道2
        // const startPos = Cesium.Cartesian3.fromDegrees(126.382911, 34.976625, 5.1);

        // 终点
        const endPos = Cesium.Cartesian3.fromDegrees(126.382911, 34.976614, 5);

        position.addSample(start, startPos);

        position.addSample(stop, endPos);

        const entity = viewer.entities.add({
            // 将实体availability设置为与模拟时间相同的时间间隔。
            availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                start: start,
                stop: stop
            })]),
            position: position, // 计算实体位置属性
            // 基于位置移动自动计算方向.
            orientation: new Cesium.VelocityOrientationProperty(position),
            model: {
                uri: './models/737/scene.gltf',
                scale: 0.25,
            },

        });

        // 开启运动
        viewer.clock.shouldAnimate = true;

        // 第三人称
        viewer.trackedEntity = entity;

        // 第一人称
        //    viewer.scene.preUpdate.addEventListener(traceHandler)

        // https://blog.csdn.net/dandan__666/article/details/115293860
        // https://blog.csdn.net/AllBluefm/article/details/137928976

        function traceHandler() {
            let center = entity.position.getValue(
                viewer.clock.currentTime
            );
            let orientation = entity.orientation.getValue(
                viewer.clock.currentTime
            )
            let transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
            transform = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation), center);
            viewer.camera.lookAtTransform(transform, new Cesium.Cartesian3(-90, 0, 50))
        }


        //火焰特效
        class FireEffect {
            constructor(viewer, obj) {
                this.viewer = viewer
                this.viewModel = {
                    emissionRate: 5,
                    gravity: 0.0,//设置重力参数
                    minimumParticleLife: 1,
                    maximumParticleLife: 6,
                    minimumSpeed: 1.0,//粒子发射的最小速度
                    maximumSpeed: 4.0,//粒子发射的最大速度
                    startScale: 0.0,
                    endScale: 10.0,
                    particleSize: 25.0,
                }
                this.emitterModelMatrix = new Cesium.Matrix4()
                this.translation = new Cesium.Cartesian3()
                this.rotation = new Cesium.Quaternion()
                this.hpr = new Cesium.HeadingPitchRoll()
                this.trs = new Cesium.TranslationRotationScale()
                this.scene = this.viewer.scene
                this.particleSystem = ''
                this.entity = this.viewer.entities.add({
                    //选择粒子放置的坐标
                    position: Cesium.Cartesian3.fromDegrees(
                        obj.lng, obj.lat
                    ),
                });

                this.init();
            }

            init() {
                const _this = this
                this.viewer.clock.shouldAnimate = true;
                this.viewer.scene.globe.depthTestAgainstTerrain = false;
                // this.viewer.trackedEntity = this.entity;

                var particleSystem = this.scene.primitives.add(
                    new Cesium.ParticleSystem({
                        image: './fire.png',//生成所需粒子的图片路径
                        //粒子在生命周期开始时的颜色
                        startColor: new Cesium.Color(1, 1, 1, 1),
                        //粒子在生命周期结束时的颜色
                        endColor: new Cesium.Color(0.5, 0, 0, 0),
                        //粒子在生命周期开始时初始比例
                        startScale: _this.viewModel.startScale,
                        //粒子在生命周期结束时比例
                        endScale: _this.viewModel.endScale,
                        //粒子发射的最小速度
                        minimumParticleLife: _this.viewModel.minimumParticleLife,
                        //粒子发射的最大速度
                        maximumParticleLife: _this.viewModel.maximumParticleLife,
                        //粒子质量的最小界限
                        minimumSpeed: _this.viewModel.minimumSpeed,
                        //粒子质量的最大界限
                        maximumSpeed: _this.viewModel.maximumSpeed,
                        //以像素为单位缩放粒子图像尺寸
                        imageSize: new Cesium.Cartesian2(
                            _this.viewModel.particleSize,
                            _this.viewModel.particleSize
                        ),
                        //每秒发射的粒子数
                        emissionRate: _this.viewModel.emissionRate,
                        //粒子系统发射粒子的时间（秒）
                        lifetime: 16.0,
                        //粒子系统是否应该在完成时循环其爆发
                        loop: true,
                        //设置粒子的大小是否以米或像素为单位
                        sizeInMeters: true,
                        //系统的粒子发射器
                        emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
                    })
                );
                this.particleSystem = particleSystem;
                this.preUpdateEvent()
            }

            //场景渲染事件
            preUpdateEvent() {
                let _this = this;
                this.viewer.scene.preUpdate.addEventListener(function (scene, time) {
                    //发射器地理位置
                    _this.particleSystem.modelMatrix = _this.computeModelMatrix(_this.entity, time);
                    //发射器局部位置
                    _this.particleSystem.emitterModelMatrix = _this.computeEmitterModelMatrix();
                    // 将发射器旋转
                    if (_this.viewModel.spin) {
                        _this.viewModel.heading += 1.0;
                        _this.viewModel.pitch += 1.0;
                        _this.viewModel.roll += 1.0;
                    }
                });
            }

            computeModelMatrix(entity, time) {
                return entity.computeModelMatrix(time, new Cesium.Matrix4());
            }

            computeEmitterModelMatrix() {
                this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);
                this.trs.translation = Cesium.Cartesian3.fromElements(
                    -4.0,
                    0.0,
                    1.4,
                    this.translation
                );
                this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);

                return Cesium.Matrix4.fromTranslationRotationScale(
                    this.trs,
                    this.emitterModelMatrix
                );
            }

            removeEvent() {
                this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);
                this.emitterModelMatrix = undefined;
                this.translation = undefined;
                this.rotation = undefined;
                this.hpr = undefined;
                this.trs = undefined;
            }

            //移除粒子特效
            remove() {
                () => { return this.removeEvent() }; //清除事件
                this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象
                this.viewer.entities.remove(this.entity); //删除entity
            }

        }
    //  setTimeout(() => {
    //     new FireEffect(viewer, {
    //             lng: 126.382931,
    //             lat: 34.976515,
    //         })
    //  }, 9500);

        addPlane();
        function addPlane() {

            var position = Cesium.Cartesian3.fromDegrees(126.382931, 34.976515, 1.0);
            var heading = Cesium.Math.toRadians(90);
            var pitch = Cesium.Math.toRadians(0);
            var roll = Cesium.Math.toRadians(0);

            var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
            var orientation = Cesium.Transforms.headingPitchRollQuaternion(
                position,
                hpr
            );

            var entity = viewer.entities.add({
                position: position,
                orientation: orientation,
                model: {
                    uri: './models/wall/scene.gltf',
                    scale: 7,
                }
            });
        }

    </script>
</body>

</html>